<!DOCTYPE html>
<html lang="en" class="">
  <head>
    <meta charset="UTF-8">
    <title>登录|注册</title>
    <meta name="robots" content="noindex">
    <link rel="shortcut icon" type="image/x-icon"
          href="">
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://www.jq22.com/jquery/font-awesome.5.81.all.css">
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v2.1.9/css/unicons.css">
    <!--		<script src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-d8236034cc3508e70b0763f2575a8bb5850f9aea541206ce56704c013047d712.js"></script>-->
    <!--		<script src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-4793b73c6332f7f14a9b6bba5d5e62748e9d1bd0b5c52d7af6376f3d1c625d7e.js"></script>-->
    <!--		<script src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js"></script>-->
    <link rel="stylesheet" href="css/reg_login.css">
    <script src="js/reg_login4.js"></script>
    <script src="js/reg_login3.js"></script>
    <script src="js/reg_login2.js"></script>
  </head>
  <body>
    <div class="section">
      <div class="container">
        <div class="row full-height justify-content-center">
          <div class="col-12 text-center align-self-center py-5">
            <div class="section pb-5 pt-5 pt-sm-2 text-center">
              <h6 class="mb-0 pb-3"><span>登录</span><span>注册</span></h6>
              <input class="checkbox" type="checkbox" id="reg-log" name="reg-log">
              <label for="reg-log"></label>
              <div class="card-3d-wrap mx-auto">
                <div class="card-3d-wrapper">
                  <div class="card-front">
                    <div class="center-wrap">
                      <div class="section text-center">
                        <!------------------------登录开始----------------------------------->
                        <h4 class="mb-4 pb-3">登 录</h4>
                        <div id="login_error" class="form-group alert alert-danger d-none">
                          <i class="fa fa-exclamation-triangle"></i>
                          <i style="color: #d94f5c">账号或密码错误</i>
                        </div>
                        <form id="login" action="/login" method="post">
                          <div class="form-group mt-2">
                            <input type="text" name="username" class="form-style"
                                   placeholder="用户名" autocomplete="off">
                            <i class="input-icon uil uil-user"></i>
                          </div>
                          <div class="form-group mt-2">
                            <input type="password" name="password" class="form-style"
                                   placeholder="密码" id="logpass" autocomplete="off">
                            <i class="input-icon uil uil-lock-alt"></i>
                          </div>
                          <button type="submit" class="btn mt-4">登录</button>
                        </form>
                        <!------------------------登录结束----------------------------------->

                      </div>
                    </div>
                  </div>
                  <div class="card-back">
                    <div class="center-wrap">
                      <div class="section text-center">
                        <!------------------------注册开始----------------------------------->
                        <h4 class="mb-4 pb-3">注 册</h4>
                        <form id="reg" action="/reg" method="post" @submit.prevent="reg">
                          <div id="reg_error" class="form-group alert alert-danger"
                               style="display: none"
                               :class="{'d-block':hasError}">
                            <i class="fa fa-exclamation-triangle"></i>
                            <i style="color: #d94f5c">{{message}}</i>
                          </div>
                          <div class="form-group">
                            <input type="text" name="nickname" class="form-style"
                                   placeholder="昵称(2~10个字符)"
                                   autocomplete="off"
                                   pattern="^.{2,10}$"
                                   required="required"
                                   v-model="nickname">
                            <i class="input-icon uil uil-star"></i>
                          </div>
                          <div class="form-group mt-2">
                            <input type="text" name="username" class="form-style"
                                   placeholder="用户名(5~15个字母、数字)" id="logemail"
                                   autocomplete="off"
                                   pattern="^[0-9a-zA-Z]{5,15}$"
                                   required="required"
                                   v-model="username">
                            <i class="input-icon uil uil-user"></i>
                            <!--<i class="fa fa-check"></i>
                            <i class="fa fa-times"></i>-->
                          </div>
                          <div class="form-group mt-2">
                            <input type="password" name="password" class="form-style"
                                   placeholder="密码(5~20个字母、数字、下划线)" id="password"
                                   autocomplete="off"
                                   pattern="^\w{5,20}$"
                                   required="required"
                                   v-model="password">
                            <i class="input-icon uil uil-lock-alt"></i>
                          </div>
                          <div class="form-group mt-2">
                            <input type="password" name="confirm" class="form-style"
                                   placeholder="请再次输入密码" id="confirm" autocomplete="off" v-model="confirm">
                            <i class="input-icon uil uil-lock-alt"></i>
                          </div>
                          <button type="submit" class="btn mt-4">注册</button>
                        </form>
                        <!------------------------注册结束----------------------------------->
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script
         src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
    <!--引入vue框架-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!--引入axios框架-->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="js/reg.js"></script>
    <script>
        if (location.search == "?login_error") {
            $("#login_error").removeClass("d-none");
        }
    </script>
  </body>